<template>
    <div class="menu-slide-bar">
        <div class="body">
            <div
                class="item"
                :class="{ 'item-active': value === item.id }"
                v-for="(item, index) in categorys"
                :key="index"
                @click="changeCategory(item, index)"
            >
                <div>{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        categorys: {
            type: Array,
            default() {
                return [
                    { name: "奶茶家族", id: "ncjz" },
                    { name: "果茶家族", id: "gcjz" },
                    { name: "芝士系列", id: "zsxl" }
                ];
            }
        },
        value: String
    },
    data() {
        return {
            currentCategory: {}
        };
    },

    methods: {
        changeCategory(item, index) {
            this.currentCategory = item;
            this.$emit("input", item.id);
            this.scrollTo(item.id);
        },
        scrollTo(id) {
            const el = document.getElementById(id);
            const scrollView = document.getElementById("menu-scroll-view");
            scrollView.scrollTop = el.offsetTop + 5;
        }
    }
};
</script>


<style lang="less" scoped>
.menu-slide-bar {
    width: 180px;
    background: #f7f8fa;
    font-size: 26px;

    .body {
        overflow-x: hidden;
        overflow-y: scroll;
        .item {
            width: 180px;
            box-sizing: border-box;
            padding: 30px 0;
            text-align: center;
        }
        .item-active {
            background: #fff;
            font-weight: 800;
            color: #000;
        }
    }
}
</style>